<template>
    <div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="70px">
                    <el-form-item label="商品相册：">
                        <multi-upload v-model="selectProductPics"></multi-upload>
                    </el-form-item>
                    <el-form-item label="预览图">
                        <el-upload
                                class="avatar-uploader"
                                :headers="myHeaders"
                                :action="uploadsrc"
                                accept="image/jpeg,image/gif,image/png"
                                list-type="picture-card"
                                :limit="1"
                                :before-upload="handleBeforeUpload"
                                :on-success="uploadLogoSuccess"
                                :on-error="uploadError"
                                :data="pdfData"
                                :file-list="logolist"
                        >
                            <img v-if="imageUrl" :src="imageUrl" class="avatar" v-model="form.previewImage">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="规格">
                        <el-input v-model="form.specifications" placeholder="比如1盒 500-600g"
                                  style="width: 150px;"></el-input>
                    </el-form-item>
                    <el-form-item label="剩余数量">
                        <el-input v-model="form.banlanceNumber" placeholder="剩余数量" style="width: 120px;"></el-input>
                    </el-form-item>
                    <el-form-item label="商品状态">
                        <el-select v-model="form.status" placeholder="请选择状态">
                            <el-option v-for="item in status" :key="item.id" :label="item.name"
                                       :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品价格">
                        <el-input v-model="form.price" placeholder="商品价格" style="width: 150px;"></el-input>
                    </el-form-item>
                    <el-form-item label="优惠价格">
                        <el-input v-model="form.voucherPrice" placeholder="优惠价格" style="width: 150px;"></el-input>
                    </el-form-item>
                    <el-form-item label="快递费用">
                        <el-input v-model="form.logisticsPrice" placeholder="0-包邮" style="width: 150px;"></el-input>
                    </el-form-item>
                    <el-form-item label="每单购买限制数量">
                        <el-input v-model="form.limitPerOrder" placeholder="0-不限制" style="width: 150px;"></el-input>
                    </el-form-item>
                    <el-form-item label="开始售卖时间">
                        <el-col :span="11">
                            <el-date-picker
                                    type="date"
                                    placeholder="开始售卖时间"
                                    v-model="form.startTime"
                                    value-format="yyyy-MM-dd HH:mm:ss "
                                    style="width: 100%;"
                            ></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="结束售卖时间">
                        <el-col :span="11">
                            <el-date-picker
                                    type="date"
                                    placeholder="结束售卖时间"
                                    v-model="form.endTime"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    style="width: 100%;"
                            ></el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label-width="120px">
                        <el-button type="primary" @click="onSubmit(form)">点击添加规格</el-button>
                        <el-button @click="cancel">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    const util = require('../../../utils/geturlkey');
    import { uploadsrc } from '../../../utils/dcf2d0812e764796a97bb2e8c1725fab.js';
    import { dynamicHeader } from '../../../utils/dcf2d0812e764796a97bb2e8c1725fab';
    export default {
        name: 'addVoucher',
        props: {
            value: Object,
            isEdit: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                selectProductCateValue: [],
                productCateOptions: [],
                productCategoryId: [{ required: true, message: '请选择商品分类', trigger: 'blur' }],
                parentId: 0,
                parentid: 0,
                parentids: [],
                categoryIds: [],
                imageUrl: '',
                imglist: [],
                ortool: true,
                goodsTypes: [{
                    type: 1,
                    name: '普通商品'
                }, {
                    type: 2,
                    name: '套餐商品'
                }],
                logolist: [],
                pdfData: {
                    type: 1,
                    path: 1
                },
                status: [
                    {
                        id: 1,
                        name: '上架'
                    }, {
                        id: 0,
                        name: '下架'
                    }, {
                        id: 2,
                        name: '删除'
                    }
                ],
                myHeaders: {},
                form: {},
                windowName: '',
                goodsId: '',
                brandOptions: [],
                brandId: [{ required: true, message: '请选择商品品牌', trigger: 'blur' }]
                // secondID:''
            };
        },
        created() {
            console.log('进入');
            let goodsId = util.getUrlKey('goodsId');
            console.log('goodsID==' + goodsId);
            if (goodsId == null || goodsId == '') {
                layer.alert('未获取到参数ID', {
                    icon: 2,
                    skin: 'layer-ext-moon'
                }, function() {
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                });
            } else {
                this.goodsId = goodsId;
            }
            this.uploadsrc = uploadsrc;
            //注意：parent 是 JS 自带的全局对象，可用于操作父页面
            this.windowName = parent.layer.getFrameIndex(window.name); //获取窗口索引
        },
        computed: {
            selectProductPics: {
                get: function() {
                    let pics = [];
                    if (this.form.pic === undefined || this.form.pic == null || this.form.pic === '') {
                        return pics;
                    }
                    pics.push(this.value.pic);
                    if (this.form.previewImage === undefined || this.form.previewImage == null || this.form.previewImage === '') {
                        return pics;
                    }
                    let previewImage = this.value.previewImage.split(',');
                    for (let i = 0; i < previewImage.length; i++) {
                        pics.push(previewImage[i]);
                    }
                    return pics;
                },
                set: function(newValue) {
                    if (newValue == null || newValue.length === 0) {
                        this.form.pic = null;
                        this.form.previewImage = null;
                    } else {
                        this.form.pic = newValue[0];
                        this.form.previewImage = '';
                        if (newValue.length > 1) {
                            for (let i = 1; i < newValue.length; i++) {
                                this.form.previewImage += newValue[i];
                                if (i !== newValue.length - 1) {
                                    this.form.previewImage += ',';
                                }
                            }
                        }
                    }
                }
            }
        },
        methods: {
            uploadError(data) {
                this.$message.success(`上传失败，请重新上传`);
            },
            uploadLogoSuccess(data) {
                if (data.returnCode == 200) {
                    this.form.previewImage = data.data;
                } else {
                    this.$message.success(`上传失败，请重新上传`);
                }
            },
            handleBeforeUpload(file) {
                this.handleimgtype(file);
                this.getmyHeaders();
            },
            getmyHeaders() {
                var dHeader = dynamicHeader();
                this.myHeaders.signature = dHeader.signature;
                this.myHeaders.nonce = dHeader.nonce;
                this.myHeaders.timestamp = dHeader.timestamp;
                this.myHeaders.appkey = dHeader.appkey;
                this.myHeaders.token = dHeader.token;
            },
            handleimgtype(file) {
                if (!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
                    this.$notify.warning({
                        title: '警告',
                        message: '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片'
                    });
                    return false;
                }
                let size = file.size / 1024 / 1024 / 2;
                if (size > 2) {
                    this.$notify.warning({
                        title: '警告',
                        message: '图片大小必须小于2M'
                    });
                    return false;
                }
            },
            onSubmit(row) {
                row.goodsId = this.goodsId;
                addPrice(row).then(res => {
                    if (res.returnCode == 200) {
                        layer.alert('修改规格成功', function() {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        });
                    } else {
                        layer.alert(res.returnMsg, {
                            icon: 2,
                            skin: 'layer-ext-moon'
                        });
                    }
                    layer.close(index);
                });
            },
            cancel() {
                parent.layer.close(this.windowName);
            }
        }
    };
</script>